<template>
  <div class="menu">
    <el-table border default-expand-all :data="permission" row-key="id">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" align="center">
        <!-- @vue-ignore -->
        <template #="{ row, $index }">
          <!-- 添加菜单：最后一级的时候禁用
            编辑和删除：第一级的时候禁用
          -->
          <el-button type="primary" size="small" v-if="row.level != 4" @click="addPermission(row)">{{ row.level == 3 ?
            "添加功能"
            : "添加菜单"
          }}</el-button>
          <el-button type="warning" :size="row.level == 4 ? 'default' : 'small'" :disabled="row.level == 1"
            @click="updatePermission(row)" :circle="row.level == 4">编辑</el-button>
          <!-- 气泡确认框 -->
          <el-popconfirm title="确定要删除吗？" @confirm="deletePermission(row.id)">
            <template #reference>
              <el-button type="danger" :size="row.level == 4 ? 'default' : 'small'"
                :circle="row.level == 4">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" title="提示" :close-on-click-modal="false" @close="cancel">
      <el-form label-width="80px">
        <el-form-item label="名称">
          <el-input placeholder="请输入名称" v-model="permissionParams.name"></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input placeholder="请输入权限值" v-model="permissionParams.code"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="save">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
// 引入方法
import { reqGetPermissionList, reqAddOrUpdatePermission, reqDeletePermission } from "@/api/user/menu/index";
// 引入ts类型
import type { PermissionResponseData, PermissionList, Permission, MenuParams } from "@/api/user/menu/type";
import { ElMessage } from "element-plus";
// 存储菜单的数据
const permission = ref<PermissionList>([])
// 对话框的显示和隐藏
const dialogVisible = ref<boolean>(false)
// 收集添加或者修改菜单的按钮，要给服务器
const permissionParams = reactive<MenuParams>({
  id: 0,
  name: '',
  code: '',
  level: 0,
  pid: 0
})
onMounted(() => {
  getHasPermission()
})
// 获取菜单数据的方法
const getHasPermission = async () => {
  const res: PermissionResponseData = await reqGetPermissionList()
  if (res.code == 200) {
    permission.value = res.data
  }
}
// 添加菜单的回调
const addPermission = (row: Permission) => {
  dialogVisible.value = true
  permissionParams.level = row.level + 1
  // 给谁的id
  permissionParams.pid = row.id as number
}
// 编辑菜单的回调
const updatePermission = (row: Permission) => {
  dialogVisible.value = true
  Object.assign(permissionParams, row)
}
// 编辑按钮的回调
const save = async () => {
  const res = await reqAddOrUpdatePermission(permissionParams)
  if (res.code == 200) {
    ElMessage.success(permissionParams.id ? "修改成功" : "添加成功")
    // 清空数据
    // 关闭弹框
    cancel()
    // 刷新页面
    getHasPermission()
  } else {
    ElMessage.error(permissionParams.id ? "修改失败" : "添加失败")
  }
}
// 取消的回调
const cancel = () => {
  dialogVisible.value = false
  // 清空数据
  Object.assign(permissionParams, {
    id: 0,
    name: '',
    code: '',
    level: 0,
    pid: 0
  })
}
// 删除的回调
const deletePermission = async (id: number) => {
  const res = await reqDeletePermission(id)
  if (res.code == 200) {
    ElMessage.success("删除成功")
    // 刷新页面
    getHasPermission()
  } else {
    ElMessage.error("删除失败")
  }
}
</script>

<style scoped></style>
